<template>
  <!-- 复查记录 -- 处理 -->
  <view class="disposeRecord">
    <view class="content">
      <view class="content-item">
        <block v-if="options.policeCheckUnqualifiedInfo.isFined == 1">
          <view class="deal-title">缴纳罚款：</view>
          <view class="deal-money">
            <view>{{ statusPay == 2 ? "已缴纳罚款：" : "金额" }}</view>
            <view class="sum" :style="{ color: statusPay == 2 ? '#000' : '#eb0101' }">
              ￥{{ options.policeCheckUnqualifiedInfo.finedMoney }}
            </view>
          </view>

          <button v-if="statusPay != 2" class="submit-btn" type="primary" style="background: #23d49d !important"
            @click="wechatPay">
            微信支付
          </button>
          <view style="padding-top: 20rpx"><u-line></u-line></view>
        </block>

        <view class="deal-title">文字说明：</view>
        <view class="thein-area">
          <u--textarea v-model="receiptContent" placeholder="请简要说明整改情况" count maxlength="50" height="135"></u--textarea>
        </view>

        <view class="deal-title">图片说明：
          <text>（最多可上传3张图片，非必填）</text>
        </view>

        <view class="upload-view">
          <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="file" :maxCount="3"
            :multiple="true" width="100" height="90">
            <image :src="baseImgUrl + 'upload-icon.png'" style="width: 200rpx; height: 180rpx"></image>
          </u-upload>
        </view>
      </view>
    </view>

    <view class="btns">
      <button class="reset-btn lt cancelBtn" type="primary" @click="resethandle">
        取消
      </button>
      <button class="submit-btn" type="primary" @click="submitHandle">
        确认
      </button>
    </view>
  </view>
</template>

<script>
  import {
    checkUnqualifiedReceipt,
    createPay,
    findStatus,
  } from "@/api/goover.js";
  import {
    Toast,
    getHeader,
    navBack,
    uniTrim,
    uploadFile
  } from "@/utils/util.js";

  export default {
    name: "disposeRecord",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        options: {},
        receiptContent: "",
        imageList: [],
        fileList: [],
        payBtn: false, //点击支付按钮   记录是否支付成功(前端的)
        statusPay: 1, //1.支付中 2.支付成功 3.支付失败
        payObj: {},
      };
    },
    onLoad(options) {
      this.options = JSON.parse(decodeURIComponent(options.data));

      if (this.options.payRecordInfo) {
        this.statusPay = this.options.payRecordInfo.payStatus;
      }
    },
    onShow() {
      if (this.payBtn) {
        let time = setInterval(() => {
          findStatus({
            id: this.payObj.orderId
          }).then((res) => {
            this.statusPay = res.result.status;
          });

          if (this.statusPay == 2 || this.statusPay == 3) {
            clearInterval(time);
          }
        }, 1000);
      }
    },
    methods: {
      afterRead(info) {
        let _this = this;

        for (let v of info.file) {
          uploadFile({
              url: "/web/sys/upload/upload_file",
              filePath: v.url,
              name: "file",
              formData: {
                type: 10,
              },
            })
            .then((res) => {
              let {
                fullPath,
                halfPath
              } = res.result;
              this.fileList.push({
                url: fullPath
              });
              this.imageList.push(halfPath);
            })
            .finally(() => {

            })
        }
      },
      deletePic(e) {
        this.fileList.splice(e.index, 1);
        this.imageList.splice(e.index, 1);
      },
      wechatPay() {
        let that = this;

        createPay({
          unqualifiedId: that.options.policeCheckUnqualifiedInfo.id,
        }).then((res) => {
          that.payObj = res.result || {};
          let {
            timeStamp,
            nonceStr,
            packageValue,
            signType,
            paySign
          } =
          res.result;

          wx.requestPayment({
            timeStamp,
            nonceStr,
            package: packageValue,
            signType,
            paySign,
            success(res) {
              if (res.errMsg == "requestPayment:ok") {
                that.statusPay = 2;
              }
            },
            complete(com) {
              if (com.errMsg == "requestPayment:ok") {
                that.payBtn = true;
              }
            },
          });
        });
      },
      resethandle() {
        uni.navigateBack();
      },
      submitHandle() {
        if (this.options.policeCheckUnqualifiedInfo.isFined == 1) {
          if (this.statusPay != 2) {
            Toast("请支付罚款金额");
            return;
          } else if (this.statusPay == 3) {
            Toast("支付失败！请重新支付");
            return;
          }
        }

        if (!this.receiptContent || !uniTrim(this.receiptContent)) {
          Toast("请填写文字说明");
          return;
        }

        let data = {
          id: this.options.policeCheckUnqualifiedInfo.id,
          receiptContent: this.receiptContent,
          imageList: this.imageList,
        };
        checkUnqualifiedReceipt(data).then((res) => {
          if (res.code == 200) {
            Toast("处理成功");
            navBack("back", 2);
            return;
          }

          Toast(res.message);
        });
      },
    },
  };
</script>

<style lang="scss">
  .disposeRecord {
    flex: 1;
    background-color: #f9f9f9;

    .content {
      margin: 0 auto;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      width: calc(100% - 35rpx);
      height: calc(100vh - 84px);
      overflow-y: auto;
      background: #fff;

      .content-item {
        padding: 25rpx;

        .deal-title {
          padding: 20rpx 0;
          color: #000000;
          font-size: 30rpx;
          font-weight: 500;

          text {
            color: #a1a1a1;
            font-size: 26rpx;
          }
        }

        .deal-money {
          display: flex;
          justify-content: space-between;
          padding: 30rpx 0;
          font-size: 26rpx;
          color: #a1a1a1;

          .sum {
            color: #eb0101;
            font-size: 36rpx;
            font-weight: bold;
          }
        }

        .thein-area {
          font-size: 28rpx;

          .u-textarea--radius,
          .u-textarea__count {
            background: #f9f9f9 !important;
          }

          .u-textarea__field {
            font-size: 28rpx;
          }
        }
      }
    }
  }
</style>